<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base th:href="${#servletContext.getContextPath()+'/'}">

    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">
        function test(msg){
            console.info("这是使用script来解决跨域的问题："+msg);
        }
    </script>

    <script type="text/javascript" src="http://localhost:8002/server2/hello?callback=test"></script>

    <script type="text/javascript">

        function but1(){
            $.get("http://localhost:8001/server1/hello","",function(data){
                $("#showMsg").text(data);
            });
        }

        function but2(){
            $.get("http://localhost:8002/server2/hello","",function(data){
                $("#showMsg").text(data);
            });
        }

        function but3() {

            // jSONP底层就是使用了<script>标签来完成跨域的
            $.ajax({
                url:"http://localhost:8002/server2/hello",
                type:"GET",
                dataType:"jsonp", // 设置成了JSONP，
                success:function(data){
                    $("#showMsg").text("这是Ajax的JSONP发出的请求"+data);
                },
               jsonpCallback:"abc"
            });
        }
    </script>
</head>
<body>


<button onclick="but1()">访问8001的hello接口</button><br>
<button onclick="but2()">访问8002的hello接口</button><br>
<button onclick="but3()">利用ajax的JSONP来实现跨域请求</button><br>
<a href="http://localhost:8002/server2/hello">点我</a><br>
<form method="post" action="http://localhost:8002/server2/hello">
    <input type="submit" value="提交">
</form>

<div id="showMsg"></div>
</body>
</html>